<template>
<form class="tw-liblogintecent" @keydown.enter="login">
  <div class="tw-login-item-wrap">
    <div class="tw-login-input-wrapper">
      <div class="xicon">
        <img class="ximg" src="@assets/xuser.png" />
      </div>
      <input v-model="username" autocomplete="off" spellcheck="false" type="text" placeholder="请输入帐号\手机号" maxlength="30" class="tw-login-input tw-login-input-with-prefix">
    </div>
    <div class="mt40 tw-login-input-wrapper">
      <div class="xicon">
        <img class="ximg" src="@assets/xpwd.png" />
      </div>
      <input v-model="password" autocomplete="off" spellcheck="false" type="password" placeholder="密码" class="tw-login-input tw-login-input-with-prefix">
    </div>
    <div class="remind-text">
      <p class="err-msg">{{errMsg}}</p>
      <!-- <a class="forget-password" :href="findPwdUrl">忘记密码</a> -->
    </div>
    <a class="submit-btn" @click="login">
      <span>登录</span>
    </a>
  </div>
</form>
</template>

<script>
import props from './props'
import style from '../tw-lib-base/style'

export default {
  name: 'tw-liblogin',

  props,

  mixins: [style],

  data() {
    return {
      logintype: '0',
      username: '',
      password: '',
      errMsg: '',
      captcha: '',
      showCaptcha: false,
      tipText: '获取验证码',
      time: 60,
      disabled: false
    }
  },

  computed: {
    style () {
      return {
        linkColor: this.linkColor,
        isConcise: this.isConcise,
        linkText: this.linkText,
        toHome: this.toHome,
        btnColor: this.btnColor
      }
    }
  },

  methods: {
    setStyle () {
      const style = `
        ::root .tw-liblogin-text a,
        ::root .tw-liblogin-text .xcut {
          color: ${this.linkColor};
        }

        ::root .tw-libcaptcha-verify .verify-bar-area .verify-move-block:hover {
          background-color: ${this.movColor};
        }

        ::root .tw-liblogin-btn {
          background-color: ${this.btnColor};
        }
      `

      this.addStyle(style)
    },

    login () {
      if (this.username === '') {
        this.errMsg = '请输入用户名'
        return
      }

      if (this.password === '') {
        this.errMsg = '请输入密码'
        return
      }

      window.axios({
        url: window.$twApp.gateway + '/openapi-uc/oauth2.0/authorize',
        method: 'post',
        headers: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: window.$ui.qs.stringify({
          client_id: this.clientId || this.$ui.urlQuery.client_id,
          response_type: 'code',
          redirect_uri: this.loginSuccessUrl || this.$ui.urlQuery.redirect_uri,
          state: '',
          version: '1.0',
          uname: this.username,
          staticmm: this.password
        })
      }).then(resp => {
        const m = resp.data.match(/class="js-login-msg">(.*?)</)
        if (m) {
          this.errMsg = m[1]
        } else {
          this.errMsg = '登录异常，请检查帐号密码重试'
        }
      }).catch(e => {
        // noop
      })
    }
  }
}
</script>

<style lang="scss">
  @import './css/index.scss';
</style>
